<template>
  <div class="mapDiv" v-loading="loading">
    <!--地图-->
    <IndexMap v-if="completeRefreshData==true"
              @getMap="getMap"
    ></IndexMap>
    <!--工具条控件-->
    <ControlToolBar v-if="completeRefreshData==true"
                    :map="map" :pageType="pageType"
                    @getClickLonLat="getClickLonLat"
    ></ControlToolBar>
    <!--超图图层显示-->
    <SuperMapLayer v-if="completeMapBool==true"
                   :map="map" :layerDataTypeList="layerDataTypeList"
                   :resetClearAllBool="resetClearAllBool"
                   :clickLonLat="clickLonLat"
    ></SuperMapLayer>
  </div>
</template>

<script setup>
//地图
import IndexMap from '@/map/thematicMap/evaluationClass/keyHiddenDanger/indexMap.vue';
import ControlToolBar from '@/map/components/controlToolBar/map.vue';
import SuperMapLayer from '@/map/components/superMapLayer/index.vue';

const { proxy } = getCurrentInstance();
const props = defineProps(['dataType','sqlFilter']);
const loading = ref(false);
const pageType = ref("重点隐患分布图页面");

const data = reactive({
  //图层数据类别code和url列表
  layerDataTypeList:[
     {
       //重点隐患房屋住宅面
       level2DataType:"zdyhsj",//数据类别二级code
       level3DataType:"zdyhfwm",//数据类别三级code
       versionCode:null,//查询临时图层过滤条件
       show:false,//是否显示
       isYw:false,//是否为业务系统数据，true业务系统，false基础数据系统
       tifFileName:null,//tif文件名称
     },
    {
      //重点隐患市政桥梁线
      level2DataType:"zdyhsj",//数据类别二级code
      level3DataType:"zdyhszx",//数据类别三级code
      versionCode:null,//查询临时图层过滤条件
      show:false,//是否显示
      isYw:false,//是否为业务系统数据，true业务系统，false基础数据系统
      tifFileName:null,//tif文件名称
    },
  ],
})
const { layerDataTypeList } = toRefs(data)

/*地图传参start*/
const completeRefreshData = ref(false);//防止刷新后地图不显示
const completeMapBool = ref(false);//是否完成加载地图
//地图对象
const map = ref(null);
const getMap = (obj)=>{
  map.value = obj;
  completeMapBool.value = true;
}
const resetClearAllBool = ref(false);//是否清空全部超图图层
//点击地图经纬度
const clickLonLat = ref([]);
//传递点击地图经纬度
const getClickLonLat = (lonlat) =>{
  clickLonLat.value = lonlat;
}
/*地图传参end*/

//根据类型显示超图图层
function showLayerByDataType(type,sql){
  if(type){
    let sqlFilter = "";
    if(sql){
      sqlFilter = sql;
    }else{
      sqlFilter = "全部";
    }
    //移除图层数据
    removeLayerVersion(type);
    //设置图层数据版本
    // setLayerVersion(type,sqlFilter);
    setTimeout(function(){
      //设置图层数据版本
      setLayerVersion(type,sqlFilter);
    },200);
  }
}

//设置图层数据
function setLayerVersion(type,sqlFilter){
  let list = layerDataTypeList.value;
  for(let i=0;i<list.length;i++){
    if(list[i].level2DataType==type){//全部
      list[i].versionCode = sqlFilter;
      list[i].show = true;
    }
  }
  console.log(list);
  layerDataTypeList.value = list;
}

//移除图层数据
function removeLayerVersion(type){
  let list = layerDataTypeList.value;
  for(let i=0;i<list.length;i++){
    if(list[i].level2DataType==type){
      list[i].show = false;
    }
  }
  console.log(list);
  layerDataTypeList.value = list;
}

//获取查询条件
const getSqlFilter = watch(() => props.sqlFilter, value => {// watch函数监听props.sqlFilter
  console.log("获取查询参数");
  console.log(value);
  if(value){
    let dataType = props.dataType;
    //根据类型显示超图图层
    showLayerByDataType(dataType,value);
  }
},{immediate:true});

onMounted(() => {
  completeRefreshData.value = true;
  //根据类型显示超图图层
  showLayerByDataType(props.dataType,"全部");
})
</script>

<style scoped lang="scss">
.mapDiv {
  width: 100%;
  /*height: 100%;*/
  position:absolute;
}

/*设置选择数据面板*/
.new-settingDiv {
  position:absolute;top:18px;left:110px;width:400px;padding:20px;padding-top: 10px;
  background:rgba(0,27,67,0.7);border-radius:4px;color:white;
}
.new-settingDiv-div1{
  padding-bottom: 10px;
  border-bottom: 1px dashed white;
}
.new-settingDiv .new-p{
  margin-bottom: 10px;
  font-size:14px;
}
.new-settingDiv-div3{
  text-align: center;
}
:deep(.new-settingDiv .el-radio){
  color:white;
}
:deep(.new-settingDiv .el-checkbox){
  color:white;
}
:deep(.new-settingDiv .new-p .el-button){
  position:absolute;right:20px;
}
:deep(.new-settingDiv .el-select){
  width:208px;
}
.new-settingDiv-span {
  float: right;
  line-height: 32px;
  cursor:pointer;
}
.new-settingDiv-span:hover {
  cursor:pointer;
}

/*带三角弹窗*/
.new-popover {
  position: absolute;
  top:0px;
  left:0px;
  padding:10px;
  background: rgba(0,27,67,0.8);
  color:white;
  z-index:100;
}
.new-triangle {
  position: absolute;
  top: 20px;
  left: -19px;
  overflow: hidden;
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: dashed solid dashed dashed;
  border-color:transparent rgba(0,27,67,0.8) transparent transparent;
}

.new-pattenAnalysisDiv {
  position: absolute;top:246px;left:105px;font-size: 14px;
}

.new-pattenAnalysisDiv-button {
  float: left;
  width: 80px;
  text-align: center;
  padding: 5px;
  cursor:pointer;
}
/*规律分析按钮div*/
.showPattenAnalysisDiv{

}
.showPattenAnalysisDiv img {
  width:25px;
  border:1px dashed white;
}
.showPattenAnalysisDiv-div1 {
  display: inline-block;width:160px;border-bottom: 1px dashed white;padding-bottom: 10px;
}

.new-div-selected {
  background: rgba(16,124,229,0.5);
  border: 1px solid #707070;
}

.areaDialog {
  text-align: center;
  .close {
    text-align: right;
    .el-icon {
      color: #606266;
      padding: 20px 0;
      margin-right: 10px;
      right: 0px;
      font-size: 22px;
    }
  }
  width: 320px;
  position: absolute;
  top: 246px;
  left: 288px;
  background: rgba($color: #fff, $alpha: 0.9);
}

.resultShowButton {
  position:absolute;
  top:20px;
  right:20px;
  width:50px;
  height:50px;
}

</style>